<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	</head>
	<body>
		<div id="example">
			<div v-bind:style="{fontSize:fontSize+'px'}">
				<my-font v-bind:text="text" v-on:enlarge="fontSize:fontSize+=2"></my-font>
			</div>
		</div>

		<script>
			Vue.component('my-font', {
				props: ['text'],
				template: `<div>\
					<button v-on:click="action">放大文本</button>\
					<p>{{text}}</p>
				</div>`,
				methods: {
					action: function() {
						this.$emit('enlarge')
					}
				}
			})
			new Vue({
				el: '#example',
				data: {
					text: '千里之行，始于足下',
					fontSize: 18
				}
			})
		</script>
	</body>
</html>
